// 组件库配置文件
export const componentLibrary = {
  // 基础组件
  basic: {
    title: '基础组件',
    components: [
      {
        type: 'text',
        name: '文本',
        icon: 'Document',
        description: '用于显示文本内容',
        category: 'basic',
        defaultProps: {
          content: '文本内容',
          fontSize: '14px',
          color: '#333333',
          fontWeight: 'normal',
          textAlign: 'left',
          lineHeight: '1.5',
          letterSpacing: 'normal',
        },
        styleConfig: [
          { prop: 'fontSize', label: '字体大小', type: 'input', default: '14px' },
          { prop: 'color', label: '文字颜色', type: 'color', default: '#333333' },
          {
            prop: 'fontWeight',
            label: '字体粗细',
            type: 'select',
            options: [
              'normal',
              'bold',
              '100',
              '200',
              '300',
              '400',
              '500',
              '600',
              '700',
              '800',
              '900',
            ],
            default: 'normal',
          },
          {
            prop: 'textAlign',
            label: '对齐方式',
            type: 'select',
            options: ['left', 'center', 'right', 'justify'],
            default: 'left',
          },
          { prop: 'lineHeight', label: '行高', type: 'input', default: '1.5' },
          { prop: 'letterSpacing', label: '字符间距', type: 'input', default: 'normal' },
          {
            prop: 'textDecoration',
            label: '文字装饰',
            type: 'select',
            options: ['none', 'underline', 'line-through', 'overline'],
            default: 'none',
          },
          {
            prop: 'textTransform',
            label: '大小写转换',
            type: 'select',
            options: ['none', 'uppercase', 'lowercase', 'capitalize'],
            default: 'none',
          },
          { prop: 'zIndex', label: '层级', type: 'number', default: 1 },
        ],
        propConfig: [
          { prop: 'content', label: '文本内容', type: 'textarea', default: '文本内容' },
          { prop: 'lineHeight', label: '行高', type: 'input', default: '1.5' },
          { prop: 'letterSpacing', label: '字符间距', type: 'input', default: 'normal' },
        ],
      },
      {
        type: 'button',
        name: '按钮',
        icon: 'Pointer',
        description: '可点击的按钮组件',
        category: 'basic',
        defaultProps: {
          text: '按钮',
          type: 'primary',
          size: 'default',
          disabled: false,
          loading: false,
          plain: false,
          round: false,
          circle: false,
        },
        styleConfig: [
          { prop: 'width', label: '宽度', type: 'input', default: 'auto' },
          { prop: 'height', label: '高度', type: 'input', default: 'auto' },
          { prop: 'margin', label: '外边距', type: 'input', default: '5px' },
          { prop: 'padding', label: '内边距', type: 'input', default: '12px 20px' },
          { prop: 'backgroundColor', label: '背景颜色', type: 'color', default: '' },
          { prop: 'borderRadius', label: '圆角', type: 'input', default: '4px' },
          { prop: 'fontSize', label: '字体大小', type: 'input', default: '14px' },
          { prop: 'zIndex', label: '层级', type: 'number', default: 1 },
        ],
        propConfig: [
          { prop: 'text', label: '按钮文字', type: 'input', default: '按钮' },
          {
            prop: 'type',
            label: '按钮类型',
            type: 'select',
            options: ['default', 'primary', 'success', 'warning', 'danger'],
            default: 'primary',
          },
          {
            prop: 'size',
            label: '尺寸',
            type: 'select',
            options: ['large', 'default', 'small'],
            default: 'default',
          },
          { prop: 'disabled', label: '禁用状态', type: 'switch', default: false },
          { prop: 'loading', label: '加载状态', type: 'switch', default: false },
          { prop: 'plain', label: '朴素按钮', type: 'switch', default: false },
          { prop: 'round', label: '圆角按钮', type: 'switch', default: false },
          { prop: 'circle', label: '圆形按钮', type: 'switch', default: false },
        ],
      },
      {
        type: 'image',
        name: '图片',
        icon: 'Picture',
        description: '图片展示组件',
        category: 'basic',
        defaultProps: {
          src: 'https://via.placeholder.com/200x150',
          alt: '图片',
          width: '200px',
          height: '150px',
          fit: 'cover',
          lazy: false,
          preview: false,
        },
        styleConfig: [
          { prop: 'width', label: '宽度', type: 'input', default: '200px' },
          { prop: 'height', label: '高度', type: 'input', default: '150px' },
          {
            prop: 'objectFit',
            label: '填充方式',
            type: 'select',
            options: ['fill', 'contain', 'cover', 'scale-down', 'none'],
            default: 'cover',
          },
          { prop: 'borderRadius', label: '圆角', type: 'input', default: '0px' },
          { prop: 'border', label: '边框', type: 'input', default: 'none' },
          { prop: 'boxShadow', label: '阴影', type: 'input', default: 'none' },
          {
            prop: 'opacity',
            label: '透明度',
            type: 'number',
            default: 1,
            min: 0,
            max: 1,
            step: 0.1,
          },
          { prop: 'zIndex', label: '层级', type: 'number', default: 1 },
        ],
        propConfig: [
          {
            prop: 'src',
            label: '图片地址',
            type: 'input',
            default: 'https://via.placeholder.com/200x150',
          },
          { prop: 'alt', label: '替代文字', type: 'input', default: '图片' },
          { prop: 'lazy', label: '懒加载', type: 'switch', default: false },
          { prop: 'preview', label: '支持预览', type: 'switch', default: false },
        ],
      },
    ],
  },

  // 表单组件
  form: {
    title: '表单组件',
    components: [
      {
        type: 'input',
        name: '输入框',
        icon: 'Edit',
        description: '文本输入组件',
        category: 'form',
        defaultProps: {
          placeholder: '请输入内容',
          type: 'text',
          size: 'default',
          disabled: false,
          clearable: true,
          showPassword: false,
          maxLength: null,
          minLength: null,
        },
        styleConfig: [
          { prop: 'width', label: '宽度', type: 'input', default: '200px' },
          { prop: 'margin', label: '外边距', type: 'input', default: '5px' },
          { prop: 'borderRadius', label: '圆角', type: 'input', default: '4px' },
          { prop: 'fontSize', label: '字体大小', type: 'input', default: '14px' },
          { prop: 'zIndex', label: '层级', type: 'number', default: 1 },
        ],
        propConfig: [
          { prop: 'placeholder', label: '占位符', type: 'input', default: '请输入内容' },
          {
            prop: 'type',
            label: '输入类型',
            type: 'select',
            options: ['text', 'password', 'number', 'email', 'tel'],
            default: 'text',
          },
          {
            prop: 'size',
            label: '尺寸',
            type: 'select',
            options: ['large', 'default', 'small'],
            default: 'default',
          },
          { prop: 'disabled', label: '禁用状态', type: 'switch', default: false },
          { prop: 'clearable', label: '可清空', type: 'switch', default: true },
        ],
      },
      {
        type: 'textarea',
        name: '文本域',
        icon: 'Document',
        description: '多行文本输入组件',
        category: 'form',
        defaultProps: {
          placeholder: '请输入多行内容',
          rows: 4,
          disabled: false,
          resize: 'vertical',
          maxLength: null,
          minRows: 2,
          maxRows: 10,
        },
        styleConfig: [
          { prop: 'width', label: '宽度', type: 'input', default: '300px' },
          { prop: 'margin', label: '外边距', type: 'input', default: '5px' },
          { prop: 'borderRadius', label: '圆角', type: 'input', default: '4px' },
          { prop: 'fontSize', label: '字体大小', type: 'input', default: '14px' },
          { prop: 'lineHeight', label: '行高', type: 'input', default: '1.5' },
          { prop: 'zIndex', label: '层级', type: 'number', default: 1 },
        ],
        propConfig: [
          { prop: 'placeholder', label: '占位符', type: 'input', default: '请输入多行内容' },
          { prop: 'rows', label: '行数', type: 'number', default: 4 },
          { prop: 'disabled', label: '禁用状态', type: 'switch', default: false },
          {
            prop: 'resize',
            label: '缩放',
            type: 'select',
            options: ['none', 'both', 'horizontal', 'vertical'],
            default: 'vertical',
          },
          { prop: 'maxLength', label: '最大长度', type: 'number', default: null },
          { prop: 'minRows', label: '最小行数', type: 'number', default: 2 },
          { prop: 'maxRows', label: '最大行数', type: 'number', default: 10 },
        ],
      },
      {
        type: 'select',
        name: '选择器',
        icon: 'ArrowDown',
        description: '下拉选择组件',
        category: 'form',
        defaultProps: {
          placeholder: '请选择',
          size: 'default',
          disabled: false,
          clearable: true,
          multiple: false,
          filterable: false,
          remote: false,
          options: [
            { label: '选项1', value: 'option1' },
            { label: '选项2', value: 'option2' },
            { label: '选项3', value: 'option3' },
          ],
        },
        styleConfig: [
          { prop: 'width', label: '宽度', type: 'input', default: '200px' },
          { prop: 'margin', label: '外边距', type: 'input', default: '5px' },
          { prop: 'borderRadius', label: '圆角', type: 'input', default: '4px' },
          { prop: 'zIndex', label: '层级', type: 'number', default: 1 },
        ],
        propConfig: [
          { prop: 'placeholder', label: '占位符', type: 'input', default: '请选择' },
          {
            prop: 'size',
            label: '尺寸',
            type: 'select',
            options: ['large', 'default', 'small'],
            default: 'default',
          },
          { prop: 'disabled', label: '禁用状态', type: 'switch', default: false },
          { prop: 'clearable', label: '可清空', type: 'switch', default: true },
          { prop: 'multiple', label: '多选', type: 'switch', default: false },
          { prop: 'filterable', label: '可搜索', type: 'switch', default: false },
          { prop: 'remote', label: '远程搜索', type: 'switch', default: false },
        ],
      },
    ],
  },

  // 布局组件
  layout: {
    title: '布局组件',
    components: [
      {
        type: 'container',
        name: '容器',
        icon: 'Grid',
        description: '布局容器组件',
        category: 'layout',
        defaultProps: {
          background: '#ffffff',
          padding: '20px',
          borderRadius: '4px',
          shadow: 'never',
          header: '',
          body: '容器内容',
        },
        styleConfig: [
          { prop: 'width', label: '宽度', type: 'input', default: '100%' },
          { prop: 'minHeight', label: '最小高度', type: 'input', default: '100px' },
          { prop: 'background', label: '背景色', type: 'color', default: '#ffffff' },
          { prop: 'padding', label: '内边距', type: 'input', default: '20px' },
          { prop: 'borderRadius', label: '圆角', type: 'input', default: '4px' },
          { prop: 'border', label: '边框', type: 'input', default: '1px solid #e4e7ed' },
          { prop: 'boxShadow', label: '阴影', type: 'input', default: 'none' },
          { prop: 'margin', label: '外边距', type: 'input', default: '0' },
          { prop: 'zIndex', label: '层级', type: 'number', default: 1 },
        ],
        propConfig: [
          { prop: 'header', label: '标题', type: 'input', default: '' },
          { prop: 'body', label: '内容', type: 'textarea', default: '容器内容' },
          {
            prop: 'shadow',
            label: '阴影显示',
            type: 'select',
            options: ['always', 'hover', 'never'],
            default: 'never',
          },
        ],
      },
      {
        type: 'divider',
        name: '分割线',
        icon: 'Minus',
        description: '分割线组件',
        category: 'layout',
        defaultProps: {
          direction: 'horizontal',
          contentPosition: 'center',
          width: '100%',
          height: '1px',
          color: '#dcdfe6',
          content: '',
        },
        styleConfig: [
          { prop: 'margin', label: '外边距', type: 'input', default: '20px 0' },
          { prop: 'width', label: '宽度', type: 'input', default: '100%' },
          { prop: 'height', label: '高度', type: 'input', default: '1px' },
          { prop: 'backgroundColor', label: '颜色', type: 'color', default: '#dcdfe6' },
          {
            prop: 'borderStyle',
            label: '线型',
            type: 'select',
            options: ['solid', 'dashed', 'dotted', 'double'],
            default: 'solid',
          },
          { prop: 'zIndex', label: '层级', type: 'number', default: 1 },
        ],
        propConfig: [
          {
            prop: 'direction',
            label: '方向',
            type: 'select',
            options: ['horizontal', 'vertical'],
            default: 'horizontal',
          },
          {
            prop: 'contentPosition',
            label: '内容位置',
            type: 'select',
            options: ['left', 'center', 'right'],
            default: 'center',
          },
          { prop: 'content', label: '文字内容', type: 'input', default: '' },
        ],
      },
    ],
  },

  // 图表组件
  chart: {
    title: '图表组件',
    components: [
      {
        type: 'line-chart',
        name: '折线图',
        icon: 'TrendCharts',
        description: '折线图表组件',
        category: 'chart',
        defaultProps: {
          title: '折线图',
          data: {
            categories: ['一月', '二月', '三月', '四月', '五月', '六月'],
            series: [
              {
                name: '系列1',
                data: [120, 200, 150, 80, 70, 110],
              },
            ],
          },
        },
        styleConfig: [
          { prop: 'width', label: '宽度', type: 'input', default: '400px' },
          { prop: 'height', label: '高度', type: 'input', default: '300px' },
          { prop: 'backgroundColor', label: '背景颜色', type: 'color', default: 'transparent' },
          { prop: 'borderRadius', label: '圆角', type: 'input', default: '4px' },
          { prop: 'zIndex', label: '层级', type: 'number', default: 1 },
        ],
        propConfig: [
          { prop: 'title', label: '图表标题', type: 'input', default: '折线图' },
          { prop: 'showLegend', label: '显示图例', type: 'switch', default: true },
          { prop: 'showTooltip', label: '显示提示', type: 'switch', default: true },
          { prop: 'smooth', label: '平滑曲线', type: 'switch', default: false },
        ],
      },
      {
        type: 'bar-chart',
        name: '柱状图',
        icon: 'DataAnalysis',
        description: '柱状图表组件',
        category: 'chart',
        defaultProps: {
          title: '柱状图',
          data: {
            categories: ['产品A', '产品B', '产品C', '产品D', '产品E'],
            series: [
              {
                name: '销量',
                data: [320, 302, 301, 334, 390],
              },
            ],
          },
        },
        styleConfig: [
          { prop: 'width', label: '宽度', type: 'input', default: '400px' },
          { prop: 'height', label: '高度', type: 'input', default: '300px' },
          { prop: 'backgroundColor', label: '背景颜色', type: 'color', default: 'transparent' },
          { prop: 'borderRadius', label: '圆角', type: 'input', default: '4px' },
          { prop: 'zIndex', label: '层级', type: 'number', default: 1 },
        ],
        propConfig: [
          { prop: 'title', label: '图表标题', type: 'input', default: '柱状图' },
          { prop: 'showLegend', label: '显示图例', type: 'switch', default: true },
          { prop: 'showTooltip', label: '显示提示', type: 'switch', default: true },
          { prop: 'barWidth', label: '柱子宽度', type: 'input', default: 'auto' },
        ],
      },
      {
        type: 'pie-chart',
        name: '饼图',
        icon: 'PieChart',
        description: '饼图表组件',
        category: 'chart',
        defaultProps: {
          title: '饼图',
          data: {
            series: [
              { name: '产品A', value: 335 },
              { name: '产品B', value: 310 },
              { name: '产品C', value: 234 },
              { name: '产品D', value: 135 },
              { name: '产品E', value: 1548 },
            ],
          },
        },
        styleConfig: [
          { prop: 'width', label: '宽度', type: 'input', default: '400px' },
          { prop: 'height', label: '高度', type: 'input', default: '300px' },
          { prop: 'backgroundColor', label: '背景颜色', type: 'color', default: 'transparent' },
          { prop: 'borderRadius', label: '圆角', type: 'input', default: '4px' },
          { prop: 'zIndex', label: '层级', type: 'number', default: 1 },
        ],
        propConfig: [
          { prop: 'title', label: '图表标题', type: 'input', default: '饼图' },
          { prop: 'showLegend', label: '显示图例', type: 'switch', default: true },
          { prop: 'showTooltip', label: '显示提示', type: 'switch', default: true },
          { prop: 'roseType', label: '南丁格尔玫瑰图', type: 'switch', default: false },
          { prop: 'radius', label: '半径大小', type: 'input', default: '70%' },
        ],
      },
    ],
  },
}

// 获取所有组件
export const getAllComponents = () => {
  const allComponents = []
  Object.values(componentLibrary).forEach((category) => {
    allComponents.push(...category.components)
  })
  return allComponents
}

// 根据类型获取组件配置
export const getComponentConfig = (type) => {
  const allComponents = getAllComponents()
  return allComponents.find((component) => component.type === type)
}

// 获取组件分类
export const getComponentCategories = () => {
  return Object.keys(componentLibrary).map((key) => ({
    key,
    ...componentLibrary[key],
  }))
}
